<template>
    <div class="epay" id="epay">
        <!-- 订单信息 -->
        <div class="order-box" v-if="lang=='zh' ">
           <h6 v-if="data.buyer_state ==0 && data.seller_state == 0">对方发起置换意向</h6>
           <h6 v-else>对方已支付保证金</h6>
           <p>订单编号：{{data.exchange_code}}</p>
           <p>订单时间：{{data.submit_time}}</p>
        </div>
        <div class="order-box" v-else>
           <h6 v-if="data.buyer_state ==0">The other party initiates a replacement intention</h6>
           <h6 v-else>The other party has paid the deposit</h6>
           <p>Order number：{{data.exchange_code}}</p>
           <p>Order time：{{data.submit_time}}</p>
        </div>
        <!-- 确认信息 -->
        <div class="info-box">
            <img v-if=" lang=='zh' " src="http://img.xianyufanshen.net//order/images/zhihuanxinxi@2x.png" alt="">
            <img class="en" v-else src="http://img.xianyufanshen.net//image/jpg/engzhihuanxinxi_eng@2x.png"> 
            <div class="goods-box" v-for="(item,index) in inGoods" :key="index" @click="goDetails(inGoods[index].goods_id,0)">
                <div class="img-box">
                    <img :src="item.head_img" alt="">
                    <img class="label" src="http://img.xianyufanshen.net//goods/image/huanjin@2x.png" alt="">
                </div>
                <dl>
                    <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{item.title}}</dt>
                    <dd>￥{{item.goods_price}} <span>x{{item.goods_num}}</span></dd>
                </dl>
            </div>
            <div class="handle-box">
                <!-- 选择商品之后 -->
                <div class="selected">
                    <img  src="http://img.xianyufanshen.net//goods/image/zhihuan@2x.png" alt="">
                </div>
            </div>
            <!-- 自己换出的商品 -->
            <div class="sales-box" >
                <div class="goods-box sold-box" @click="goDetails(outGoods.goods_id,1)">
                    <div class="img-box">
                        <img :src="outGoods.head_img" alt="">
                        <img class="label" src="http://img.xianyufanshen.net//goods/image/huanchu@2x.png" alt="">
                    </div>
                    <dl>
                        <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{outGoods.title}}</dt>
                        <dd>￥{{outGoods.goods_price}} <span>x{{outGoods.goods_num}}</span></dd>
                    </dl>
                 </div>
            </div>
           
        </div>
        <!-- 支付金额 -->
        <div class="payMoney">
           
            <p  v-if=" lang=='zh' "><img src="http://img.xianyufanshen.net//goods/image/zhifujine@2x.png" alt=""></p>
            <p v-else><img class="en" src="http://img.xianyufanshen.net//image/jpg/eng11020181026162351.png"></p>
            <!-- bottom -->
            <div class="bottom">
                <p v-if="lang=='zh' ">保证金</p>
                <p v-else>caution money</p>
                <p>￥{{totalPrice}}</p>
            </div>
        </div>
         <!-- 选择支付方式 -->
        <div class="choosePay">
            <div class="choosePay-txt">
                 <img v-if="lang=='zh' " src="http://img.xianyufanshen.net//goods/image/xuanzezhifufangshi@2x.png" alt="">
                <img v-else class="en" src="http://img.xianyufanshen.net//image/jpg/eng110zhifufangshi_eng@2x.png">
            </div>
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <div class="relative borderbtm">
                        <img class="choosePay-icon choosePay-wechat" src="http://img.xianyufanshen.net//goods/image/weixinzhifu@2x.png" alt="">
                        <van-cell v-if="lang=='zh' " title="微信支付" clickable @click="radio = '2'">
                            <van-radio name="2" />
                        </van-cell>
                        <van-cell v-else title="WeChat" clickable @click="radio = '2'">
                            <van-radio name="2" />
                        </van-cell>
                    </div>
                    <div class="relative borderbtm">
                        <img class="choosePay-icon choosePay-ali" src="http://img.xianyufanshen.net//goods/image/zhifubaozhifu@2x.png" alt="">
                        <van-cell v-if="lang=='zh' " title="支付宝支付" clickable @click="radio = '1'">
                            <van-radio name="1" />
                        </van-cell>
                        <van-cell v-else title="Alipay" clickable @click="radio = '1'">
                            <van-radio name="1" />
                        </van-cell>
                    </div>      
                    <div class="relative">
                        <img class="choosePay-icon choosePay-yue" src="http://img.xianyufanshen.net//goods/image/wodeyue@2x.png" alt="">
                        <van-cell :title="myBalance" clickable @click="radio = '3'">
                            <van-radio name="3" />
                        </van-cell>
                    </div>              
                </van-cell-group>
            </van-radio-group>
        </div>
          <!-- 法律声明 -->
        <div class="TERMS">
            <input type="checkbox" class="checkbox" :class="{active:state}" @click="CheckItem" v-model="state" />
            <span class="txt" v-if="lang=='zh'">我已同意<i @click="showLaw">《法律声明》</i></span>
            <span class="txt" v-if="lang=='en'">I have agreed<i @click="showLaw">《Legal Notices》</i></span>
        </div>
        <!-- 优惠买单按钮 -->
        <div class="btn-box" v-if="lang=='zh' ">
            <div class="btn" @click="submit">支付保证金</div>
            <div class="centerrefuse" @click="applyclose"  v-if="data.seller_state != 0">申请关闭交易</div>
            <!-- <div class="refuse"  @click="refuse">拒绝置换</div> -->
        </div>
        <div class="btn-box" v-else>
            <div class="btn" @click="submit">Payment deposit</div>
            <div class="centerrefuse" @click="applyclose"  v-if="data.seller_state != 0">Apply to close the transaction</div>
        </div>
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {getAccountInfo,} from '@/api/my/userInfo'
import {getOrdersDetails,postCloseOrder,postSendExpress,postRefuse,} from '@/api/order/exchange'
import { postBalancePay} from '@/api/goods';
import { Loading,Toast,Cell, CellGroup ,RadioGroup, Radio,Dialog} from 'vant';

export default {
    name:'epay',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Radio.name]:Radio,
        [RadioGroup.name]:RadioGroup,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Toast.name]:Toast,
        [Dialog.name]:Dialog,
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前订单id
           type:1,//选择商品类型 1购买 0置换
           userId:0,//用户id 
           data:{},//详情数据 
           outGoods:{},//换出的商品
           inGoods:[],//换进的商品 可能是多个
           radio:'2',//支付方式:1余额，2支付宝，3微信
           balance:0,//我的余额
           myBalance:'',//我的余额描述
           totalPrice:'',//购买的总价格
           loading:false,//加载提示框 是否显示(页面初始加载显示)
           isSelected:false,//是否选择了置换的商品
             state:true,//复选框是否选中
        
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
            this.getUserInfo();
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        //获取订单id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
             //请求数据
             this.getAllData();
        }else{
            if(this.lang == 'zh')
                Toast('获得订单ID失败，请返回列表页重试'); 
            else
                Toast('The order ID failed. Please return to the list page to try again.');         
            this.loading = false;
        }
      
       
    },
    //
    methods:{
        //获得用户信息
        getUserInfo(){
            getAccountInfo(this.userId).then(res => {
                // console.log(res);
                if(res.code == 200){
                    this.balance = parseFloat(res.data.balance);//钱包余额
                    this.balance =  this.balance.toFixed(2);//钱包余额
                  
                    if(this.lang == 'zh'){
                        this.myBalance = '我的余额  (剩余￥'+this.balance+')';
                    }else{
                        this.myBalance = 'My balance  (lave'+this.balance+')';
                    }
                }
            });
        },
        //获得所有详情数据
        getAllData(){
            getOrdersDetails(this.id,this.lang).then(res => {
                console.log(res,'this.data');
                if(res.code == 200){
                    this.data = res.data;
                    this.outGoods = this.data.outputGoods;
                    this.inGoods = this.data.incomeGoods;
                    this.totalPrice = this.data.seller_bond;
                    this.loading = false;
                }else {
                    if(this.lang == 'zh')
                        Toast('获取团购详情失败，请稍后再试~');
                    else 
                        Toast('Failed to get group purchase details, please try again later');
                }
            }); 
        },
       //提交 支付保证金
        submit(){
            //先判断有没有同意法律声明
            if(!this.state){//没同意
                Toast("请勾选法律声明！");
            }else{
           //选择余额的时候判断是否足够
            if(this.radio == 3){//余额
                if(Number(this.balance) > Number(this.totalPrice)){//余额足够 且 发起支付
                    console.log(this.balance);
                    //弹窗提示是否确认使用余额支付
                    var message = '';
                    if(this.lang == 'zh'){
                        message = '确定使用余额支付？';
                    }else{
                        message = 'Determine the use of balance payment?';
                    }
                    Dialog.confirm({
                        title: '',
                        message: message,
                    }).then(() => {
                    // on confirm
                        let param = {};
                        param.userId = this.userId;
                        param.orderCode = this.data.seller_bond_code;//订单编号  被置换方视角  被置换方支付保证金订单编号
                        param.lang = this.lang;
                        postBalancePay(param).then(res => {
                            if(res.code == 200){
                                //跳转到支付成功页面 
                                    let params = {};
                                    if(this.lang == 'zh')
                                        params.title = "支付成功";//必须参数
                                    else
                                        params.title = 'Pay Success';
                                    params.url = "/orderSuccess?type=1&status=0&uerId="+this.userId+"&lang="+this.lang;//必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
                                    this.interaction.hLink(params);
                            }else {
                                //跳转到支付失败页面 
                                    let params = {};
                                    if(this.lang == 'zh')
                                        params.title = "支付失败";//必须参数
                                    else
                                        params.title = "Pay Fail";//必须参数
                                    params.url = "/orderFail?type=1&status=0&uerId="+this.userId+"&lang="+this.lang; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
                                    this.interaction.hLink(params);
                            }
                        }); 
                    }).then(() => {
                    //on cancel
                    })
                }else{
                    if(this.lang == 'zh'){
                        Toast("余额不足，请选择其他支付方式");
                    }else{
                        Toast("balance is not enough"); 
                    }
                    return false;
                }
            }else{//非余额支付
                let para = {};
                para.payType = this.radio;//支付方式
                para.orderType = 4,//订单类型  1藏品购买，2藏品置换 3、发布藏品支付 4订单置换支付 5 订单购买支付 6 我的置换订单支付 7  我的购买订单支付
                para.orderCode = this.data.seller_bond_code;//订单编号
                para.lang = this.lang;
                //原生支付方法
                this.interaction.hPay(para);
            }
            }    
        },
        //拒绝置换
        refuse(){
            let param = {};
            param.orderId = this.id;
            param.result = 1,//不同意置换、2同意置换
            param.lang = this.lang;
            postRefuse(param).then(res => {
                if(res.code == 200){
                    //隐藏加载中
                    this.load = false;  
                    //跳转到操作结果页面
                    let para = {};
                   
                    if(this.lang == 'zh'){
                        para.title = "拒绝置换";
                    }else{
                        para.title = "Refusal to exchange";
                    }
                    para.url = "/orderFail?type=3&status=0&lang"+this.lang;
                    this.interaction.hLink(para);
                }else{
                    Toast(res.msg);
                }
                
            }) 
        },
        //申请关闭交易---置换交易
        applyclose(){
            //跳转到提交原因的页面
            let para = {};
            if(this.lang == 'zh'){
                para.title = "申请关闭交易";
            }else{
                para.title = "Apply to close the transaction";
            }
            para.url = "/fackOf?lang="+this.lang+"&id="+this.id+"&userId="+this.userId;
            console.log(para)
            this.interaction.hLink(para);
        },
        //跳转到商品详情
        goDetails(id,tab){
            if(tab == 1){
                //自己的商品 隐藏按钮
                let para = {};
                para.id = id;//藏品详情详情id (返回首页 此参数没有)
                para.linkType = "goodsDetail";
                para.lang = this.lang;//显示网页语言类型 zh中文 en英文
                para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                para.HideFootBar = true; //隐藏底部操作按钮 没有该参数代表不隐藏
                //  console.log(para)
                this.interaction.hLinkToApp(para);	
            }else{
                //他人商品 不隐藏按钮
                let para = {};
                para.id = id;//藏品详情详情id (返回首页 此参数没有)
                para.linkType = "goodsDetail";
                para.lang = this.lang;//显示网页语言类型 zh中文 en英文
                para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                // console.log(para)
                this.interaction.hLinkToApp(para);	
            }
            
        },
         //法律声明选中
        CheckItem(){
            this.state = !this.state;
        }, 
        //显示法律声明
        showLaw(){
            //跳转到法律声明
            let para = {};
            if(this.lang == 'zh'){
                para.title = "法律声明";
            }else{
                para.title = "Legal Notices";
            }
            para.url = "/law?lang="+this.lang+"&userId="+this.userId;
            console.log(para);
            this.interaction.hLink(para);
        },
    }
    
}
</script>

<style lang="stylus" scoped>
#epay{
    // height:100%;
    padding-bottom:1.7rem;
    background: #f1f1f1;
}
// 订单顶部信息
.order-box{
   padding :.4rem .266667rem; 
   height:2.666667rem;
   background :url("http://img.xianyufanshen.net//order/images/beijing_dingdanxiangqing@2x.png") no-repeat;
   background-size:100%;
   box-sizing :border-box;
   h6{
       font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#cb9c57;
        letter-spacing:.0112rem;
        text-align:left;
        line-height :.533333rem;
        
   }
   p{   
       font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#cb9c57;
        letter-spacing:.0096rem;
        text-align:left;
        line-height :.533333rem;
        margin-top :.16rem;
   }
}
// 确认信息
.info-box{
    background-color :#fff;
    text-align:center;
    img{
        width :2.96rem;
        height :auto;
        margin .266667rem auto;
        &.en{
            width :3.6rem; 
        }
    }
    .goods-box{
        background:#fafafa;
        padding :.266667rem;
        overflow:hidden;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                height:100%;
                margin :0;
            }
            img.label{
                width :1.093333rem;
                height :auto;
                position:absolute;
                left 0;
                top :0;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
               
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    .sold-box{
        margin-top :.133333rem;
    }
    //选择互换商品操作盒子区
    .handle-box{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#eb3148;
        line-height:.533333rem;
        text-align:left;
      
        padding: 0 .266667rem;
        .click-box{
            position: relative;
            height :1.066667rem;
            line-height :1.066667rem;
            span{
                 color:red;
            }
            img.arow{
                height :.32rem;
                width :auto;
                position :absolute;
                right :0;
                top: 50%;
                margin-top :-0.16rem;
            }
        }
        .selected{
            text-align :center;
            img{    
                height :.533333rem;
                width :auto;
            }
        }
      
    }
}
// 支付金额
.payMoney{
    background-color :#fff;
    margin-top :.266667rem;
    padding :.266667rem;
    p{
        text-align :center;
        img{
            width: 2.96rem;
            height: auto;
            margin-bottom :.266667rem;
            &.en{
                width: 3.6rem;
            }
        }
    }    
   .bottom{
       overflow :hidden;
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        line-height:20px;
       p{
           float:left;
       }
       p:last-child{
           float:right;
           font-family:PingFangSC-Medium;    
             color:#cb9c57;
       }
   }
}
// 选择支付方法
.choosePay{
    margin-top :.266667rem;
    background-color :#ffffff;
    .choosePay-txt{
        text-align :center;
        img{
            width: 3.76rem;
            height: auto;
            margin: 0.266667rem auto;
            &.en{
                width:4rem;
            }
        }
    } 
    .relative{
        position:relative;
        .van-cell{
            padding-left :1.28rem!important; 
            font-family:PingFangSC-Regular;
            font-size:.346667rem!important;
            color:#494949;
            text-align:left;
        }
        .choosePay-icon{
            top: 50%;
            left: .4rem;
            margin-top: -0.34rem;
            width :.666667rem;
            height :.666667rem;
            position: absolute;
            z-index: 1;
        }
    }
    .borderbtm{
        border-bottom :.026667rem solid #f1f1f1;
    }   
            
}
// 底部操作按钮
.btn-box{
    position :fixed;
    padding-left :.4rem;
    left 0;
    bottom:0;
    opacity:0.9;
    background:#ffffff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
    width:100%;
    height :1.306667rem;
    line-height :1.306667rem;
    font-family:PingFangSC-Medium;
    font-size:.373333rem;
    color:#42403b;
    letter-spacing:.005067rem;
    box-sizing :border-box;
    z-index: 999;
    .refuse{
        height :1.306667rem;
        line-height :1.306667rem;
        width :29%;
        font-family:PingFangSC-Regular;
        font-size:.4rem;
        color:#cb9c57;
         float:right;
        &.en{
            width: 38%;
        } 
    }
    .centerrefuse{
        height :1.306667rem;
        line-height :1.306667rem;
        width :100%;
        text-align:center;
        font-family:PingFangSC-Regular;
        font-size:.4rem;
        color:#cb9c57;
    }
    .btn{
        background:#cb9c57;
        width:40%;;
        height :1.306667rem;
        line-height :1.306667rem;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.007733rem;
        text-align:center;
        float:right;
    }
}
// 法律声明
.TERMS{
    padding-left :0.4rem;
    margin-top:10px;
    position:relative;
    height:16px;
    line-height :16px;
    .checkbox{
        display:block;
        width:16px;
        height:16px;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background :url("http://img.xianyufanshen.net//address/image/weixuanzhong_dizhi@2x.png") no-repeat;
        background-size :100%;
        position:absolute; 
        // top:50%;
        // left :0.4rem;
        // margin-top:-8px;
        &.active{
            background :url("http://img.xianyufanshen.net//address/image/xuanzhong_dizhi@2x.png") no-repeat;
            background-size :100%;
            width:16px;
            height:16px;
        }
       
    }
    span.txt{
        display: inline-block;
        height:16px;
        line-height :16px;
        margin-left: 22px;
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#a2a2a2;
        position:relative;
          top: -6px;
        letter-spacing:0.68px;
        i {
            color:#2393fe;
        }
    }
}
</style>


